.product-carousel {
    margin-top: 70px; /* Margen superior para el carrousel */
    width: 75%; /* Aumenta el ancho del contenedor al 95% del ancho total */
    max-width: 1500px; /* Limita el ancho máximo a 1500px para pantallas grandes */
    margin-left: auto; /* Centra el contenedor horizontalmente */
    margin-right: auto; /* Centra el contenedor horizontalmente */
}

.product-carousel .product-slide h3 {
    color: rgb(0, 0, 0);  /* Color del título */
}

.product-carousel .product-slide p {
    color: rgb(146, 144, 144);  /* Color de la descripción */
}

.product-carousel .product-slide {
    display: flex;
    flex-direction: column;  /* Organiza la imagen y el contenido de manera vertical */
    justify-content: space-between;  /* Espacio entre la imagen y la descripción */
    align-items: center;
    margin: 15px;  /* Espacio entre cada slide */
    border-radius: 40px;  /* Bordes redondeados */
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);  /* Sombra suave alrededor del contenedor */
    transition: box-shadow 0.7s ease-in-out, transform 0.7s ease;  /* Transición suave para la sombra y transformación */
    padding: 20px 0 10px 0; /* Asegura que la imagen no quede pegada arriba */
}

.product-carousel .product-slide:hover {
    background-color: transparent;  /* Elimina el color de fondo en el hover */
    
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);  /* Aumenta la sombra en el hover */
    transition: transform 0.6s ease, box-shadow 0.6s ease;  /* Transición suave para el aumento y la sombra */
}

.product-carousel .product-slide img {
    width: 100%;  /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 200px;  /* Define una altura fija para todas las imágenes */
    object-fit: contain;  /* Ajusta la imagen al contenedor sin recortar ni deformar */
    object-position: center;  /* Centra la imagen dentro del contenedor */
}

.product-carousel .product-description {
    text-align: center;
    padding: 10px;
    background: transparent;  /* Fondo transparente para la descripción */
    color: white;
    width: 100%;  /* Asegura que la descripción ocupe todo el ancho del slide */
    border-bottom-left-radius: 15px;  /* Bordes redondeados en la parte inferior */
    border-bottom-right-radius: 15px; /* Bordes redondeados en la parte inferior */
}

.product-carousel .btn-add-to-cart {
    width: 60%;  /* Hace que el botón ocupe el 60% del ancho */
    background-color: #ffffff;  /* Color de fondo del botón */
    color: rgb(112, 109, 109);
    border: none;
    padding: 10px 20px; /* Espacio interno del botón */
    margin-top: 10px;
    cursor: pointer;
    border-radius: 25px;
    font-weight: bold;  /* Hace el texto del botón en negrita */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);  /* Sombra suave alrededor del botón */
    transition: box-shadow 0.3s ease, transform 0.3s ease;  /* Transición para el hover */
}

.product-carousel .btn-add-to-cart:hover {
    background-color: transparent;  /* Elimina el color de fondo en el hover */
    transform: scale(1.1);  /* Aumenta el tamaño del botón un 10% */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);  /* Aumenta la sombra en el hover */
}

.product-carousel .product-description .product-price {
    font-size: 25px;  /* Tamaño de la fuente */
    font-weight: bold;  /* Negrita */
    color: #5e5c5c;  /* Color verde (puedes cambiarlo a cualquier otro) */
    margin-top: 10px;  /* Espacio por encima del precio */
}


/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .product-carousel .product-description h3 {
        font-size: 16px;  /* Ajusta el tamaño del título en pantallas más pequeñas */
    }

    .product-carousel .product-description p {
        font-size: 12px;  /* Ajusta el tamaño de la descripción */
    }

    .product-carousel .product-slide img {
        height: 150px;  /* Ajusta la altura de la imagen en pantallas más pequeñas */
    }

    .product-carousel .product-slide {
        width: 75%; /* En pantallas pequeñas, ocupa todo el ancho */
    }
}

@media (max-width: 321px){

    .product-carousel .product-slide {
        width: 75%; /* En pantallas pequeñas, ocupa todo el ancho */
    }



}

/* Barra de navegación */
.custom-nav {
    background-color: #62686e; /* Fondo gris */
    width: 100%!important; /* Ocupa todo el ancho */
    padding: 15px 0;
    text-align: center;
    position: absolute;
  }
  
  /* Estilos para los enlaces */
  .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Para que los elementos estén en fila */
    justify-content: center; /* Centra los enlaces */
  }
  
  /* Estilo individual de cada item */
  .nav-item {
    margin: 0 20px; /* Espaciado entre los elementos */
  }
  
  /* Estilo de los enlaces */
  .nav-link {
    color: white; /* Texto blanco */
    text-decoration: none; /* Elimina el subrayado */
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s ease; /* Efecto de transición al pasar el ratón */
  }
  
  /* Efecto hover para los enlaces */
  .nav-link:hover {
    color: #f0f0f0; /* Cambia el color al pasar el ratón */
  }
  
  /* Si la pantalla es pequeña, podemos hacer que los elementos se alineen de forma vertical */
  @media (max-width: 768px) {
    .nav-links {
      flex-direction: column;
    }
  
    .nav-item {
      margin-bottom: 10px; /* Espaciado vertical entre los elementos */
    }
  }

.slick-carousel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.slick-track {
    display: flex;
    align-items: stretch;
}

.slick-slide {
    height: auto;
    display: flex;
}